<template>
    <div class="common">
        <el-container>
            <el-header>
                <div class="title">
                    <h3 style="display: inline;">选择医疗机构</h3>
                    <span v-if="institutions.length > 4" class="institutions-more"
                        @click="this.$router.push('/moreHealthInstitutions');">更多 >></span>
                </div>
                <div class="institutions">
                    <div v-for="item in institutions.slice(0, 4)" class="institution" @click="clickInstitution(item)">
                        <el-image v-if="item.institution_img" :src="item.institution_img"
                            class="institution-img"></el-image>
                        <el-image v-else src="src\assets\imgs\暂无图片.png" class="institution-img"></el-image>
                        <p class="institution-info">
                            <span v-text="item.name"></span>
                            <el-tag v-if="item.level != 10" v-text="levelText(item.level)" effect="dark" type="success"
                                size="small"></el-tag>
                        </p>
                        <p v-text="item.address" class="address"></p>
                    </div>
                </div>
                <div>
                    <h3 style="margin-bottom: 10px;">根据科室筛选</h3>
                    <div class="departments">
                        <el-button type="primary" v-for="item in departments" @click="selectDepartment(item)" size=""
                            :plain="!item.isSelect">
                            {{ item.name }}
                        </el-button>
                    </div>
                </div>
            </el-header>
            <!-- <el-main>Main</el-main> -->
        </el-container>
    </div>
</template>

<script>
import { departmentFindAPI } from '@/api/department';
import { healthInstitutionFindAPI } from '@/api/healthInstitution';

export default {
    data() {
        return {
            params: {
                // 查询参数
                institution_id: '',
                department_id: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            institutions: [],
            departments: [],
        }
    },
    methods: {
        loadInstitutions() {
            healthInstitutionFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.institutions = resp.data.datas;
                    for (let i = 0; i < this.institutions.length; i++) {
                        // 为每行数据添加一个isSelect和isDisabled
                        this.institutions[i].isSelect = false;
                        this.institutions[i].isDisabled = false;
                    }
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        loadDepartments() {
            departmentFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.departments = resp.data.datas;
                    for (let i = 0; i < this.departments.length; i++) {
                        // 为每行数据添加一个isSelect和isDisabled
                        this.departments[i].isSelect = false;
                        this.departments[i].isDisabled = false;
                    }
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        selectInstitution(item) {
            if (item.isSelect) {
                item.isSelect = false;
                this.params.institution_id = '';
            } else {
                item.isSelect = true;
                this.params.institution_id = item.id;
                this.institutions.forEach(element => {
                    if (element != item) {
                        element.isSelect = false;
                    }
                });
            }
            console.log(this.params.institution_id);
            let flag = false;
            // 如果未选择科室，则重新加载科室
            this.departments.forEach(element => {
                if (element.isSelect == true) {
                    flag = true;
                    return;
                }
            });
            if (!flag) {
                this.loadDepartments();
            }
        },
        selectDepartment(item) {
            if (item.isSelect) {
                item.isSelect = false;
                this.params.department_id = '';
            } else {
                item.isSelect = true;
                this.params.department_id = item.id;
                this.departments.forEach(element => {
                    if (element != item) {
                        element.isSelect = false;
                    }
                });
            }
            this.loadInstitutions();
        },
        clickInstitution(item) {
            this.$router.push('/healthInstitution/' + item.id);
        }
    },
    computed: {
        levelText() {
            return (level) => {
                switch (level) {
                    case 0:
                        return '三级特等';
                    case 1:
                        return '三级甲等';
                    case 2:
                        return '三级乙等';
                    case 3:
                        return '三级丙等';
                    case 4:
                        return '二级甲等';
                    case 5:
                        return '二级乙等';
                    case 6:
                        return '二级丙等';
                    case 7:
                        return '一级甲等';
                    case 8:
                        return '一级乙等';
                    case 9:
                        return '一级丙等';
                    case 10:
                        return '其他';
                }
            };
        }
    },
    created() {
        this.loadInstitutions();
        this.loadDepartments();
    },
}
</script>

<style scoped>
.common {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

.el-header {
    /* background-color: #B3C0D1; */
    height: 100%;
    padding: 0;
}

.el-main {
    background-color: #E9EEF3;
    /* padding:20px; */
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.institutions-more {
    user-select: none;
    cursor: pointer;

    &:hover {
        color: #409EFF;
    }
}

.institutions {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;

}

.institutions .institution {
    margin: 10px 20px;
    cursor: pointer;
}

/* 去除第一个 institution 的左外边距 */
.institutions .institution:first-child {
    margin-left: 0;
}

/* 去除最后一个 institution 的右外边距 */
.institutions .institution:last-child {
    margin-right: 0;
}

.institutions .institution .address {
    font-size: small;
    color: #909399;
}

.institutions .institution .institution-img {
    width: 270px;
    height: 180px;
}

.institutions .institution .institution-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
}

.el-tag {
    /* cursor: pointer; */
    margin: 5px;
    user-select: none;

    /* &:hover {
        background-color: #409EFF;
        color: #fff;
    } */
}

@media (max-width: 768px) {
    .el-main {
        width: 80%;
    }

    .institutions {
        align-items: center;
        justify-content: center;
    }

    .institutions .institution {
        margin: 1.5vh 1vw;
    }

    .institutions .institution .institution-img {
        width: 45vw;
        height: 30vw;
    }

    .institutions .institution .institution-info {
        display: flex;
        width: 45vw;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .institutions .institution .address {
        text-align: center;
    }

    .departments {
        display: flex;
        flex-wrap: wrap;
    }

    .departments .el-button {
        margin: 0 10px 0 0;
    }
}
</style>